<template>
	<view class="mainCon">
		<view class="headForm">
			<u-form :model="formData" ref="uForm" label-width="160">
				<u-form-item label="委托号">
					<u-input v-model="formData.wtno" />
				</u-form-item>
				<u-form-item label="箱号">
					<u-input v-model="formData.xh" />
				</u-form-item>
				<u-form-item label="车号">
					<u-input v-model="formData.carcode" />
				</u-form-item>
				<u-form-item label="分发车队">
					<u-input v-model="formData.agencycompany" />
				</u-form-item>
			</u-form>
			<view class="btnGroup">
				<u-button :custom-style="customStyle" type="primary" @click="onSearch">查询</u-button>
				<u-button :custom-style="customStyle" type="primary" @click="tapSelAll">全选</u-button>
				<u-button :custom-style="customStyle" type="primary" @click="tapredo">撤销</u-button>
			</view>
		</view>
		<view style="height: 430rpx;">

		</view>
		<view class="empty" style="margin-top: 50rpx;" v-if="list.length==0">
			<u-empty text="暂无相关数据" mode="list"></u-empty>
		</view>
		<view class="listCon">
			<view class="listItem" v-for="(item, index) in list" :key="index">
				<view class="infoCon" @click="selectitem(item)">
					<view class="checkBox">
						<u-checkbox v-model="item.checked"></u-checkbox>
					</view>
					<view class="container">
						<view class="cellItem">
							<view class="label">
								提单号：
							</view>
							<view class="value">
								{{item.TIDANNO}}
							</view>
						</view>
						<view class="cellItem">
							<view class="label">
								车号：
							</view>
							<view class="labelTag">
								{{item.CARCODE == undefined ? '' : item.CARCODE}}
							</view>
						</view>
						<view class="cellItem">
							<view class="label">
								分发车队：
							</view>
							<view class="value">
								{{item.AGENCYCOMPANY == undefined ? '' : item.AGENCYCOMPANY}}
							</view>
						</view>
						<view class="cellItem">
							<view class="label">
								作业方式：
							</view>
							<view class="value">
								<template v-if="item.WORKWAY=='FOEI'">
									重出空回
								</template>
								<template v-if="item.WORKWAY=='EOFI'">
									空出重回
								</template>
								<template v-if="item.WORKWAY=='EOEI'">
									空出空回
								</template>
								<template v-if="item.WORKWAY=='EITC'">
									空进
								</template>
								<template v-if="item.WORKWAY=='FINO'">
									重进
								</template>
								<template v-if="item.WORKWAY=='FONI'">
									重出
								</template>
								<template v-if="item.WORKWAY=='EONI'">
									空出
								</template>
							</view>
						</view>
						<view class="cellItem">
							<view class="label">
								委托号/序号：
							</view>
							<view class="value">
								{{item.WTNO}} / {{item.TIDANXH}}
							</view>
						</view>

						<view class="cellItem">
							<view class="label">
								箱号：
							</view>
							<view class="labelTag">
								{{item.XH}}
							</view>
						</view>
						<view class="cellItem">
							<view class="label">
								箱尺：
							</view>
							<view class="value">
								{{item.XC}}{{item.XX}}
							</view>
						</view>
						<view class="cellItem">
							<view class="label">
								箱主：
							</view>
							<view class="value">
								{{item.XGS}}
							</view>
						</view>
					</view>
					<!-- 		<view class="edit" @click="tapEdit(item)">
						修改
					</view> -->
					<view class="edit">
						<u-button type="primary"text="修改" @click="tapEdit(item)" size="mini">修改</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="showEditpop" :show-cancel-button="true" @confirm="onconfirmmodal" @cancel="oncancelmodal">
			<view class="slot-content">
				<u-form-item label="手机号：" label-width="150" label-align="right">
					<u-input v-model="editPhone" placeholder="请输入手机号" />
				</u-form-item>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					height: '60rpx',
				},
				formData: {
					wtno: '',
					carcode: '',
					xh: '',
					agencycompany: ''
				},
				list: [],
				truckname: uni.getStorageSync("nickName"), // ,uni.getStorageSync("nickName")
				isCheckAll: false,
				editPhone: '',
				editcarcode: "",
				showEditpop: false,
				flag: false,
				baseUrl: 'https://tos.flatgroup.com.cn:9000/flt-api'
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/Q/KMUObMvblD79nWn?wtno='+this.formData.wtno+'&carcode=' + this.formData
					// 	.carcode + '&truckname=' + this.truckname + '&xh=' + this.formData.xh+'&agencycompany='+this.formData.agencycompany,
					// method: "get",
					url: this.baseUrl + '/zlkj/wechat/clzpGetData',
					method: 'post',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					data: { 
						carcode: this.formData.carcode,
						xh: this.formData.xh,
						wtno: this.formData.wtno,
						truckname: this.truckname, //当前登录的车队账号
						agencycompany: this.formData.agencycompany
					},
					success: (res) => {
						this.isCheckAll = false
						res.data.rows.forEach((item) => {
							item.checked = false
						})
						this.list = res.data.rows
						uni.hideLoading()
					}
				})
			},
			tapSelAll() {
				if (this.isCheckAll) {
					this.list.forEach((item) => {
						item.checked = false
					})
					this.isCheckAll = false
				} else {
					this.isCheckAll = true
					this.list.forEach((item) => {
						item.checked = true
					})
				}
			},
			onSearch() {
				this.getList()
			},
			selectitem(item) {
				if (item.checked == false) {
					item.checked = true
				} else {
					item.checked = false
				}
			},
			tapEdit(item) {
				this.editPhone = item.TRUCKERNO
				this.editcarcode = item.CARCODE
				this.showEditpop = true
			},
			onconfirmmodal() {
				if (this.editPhone == '' || this.editPhone == undefined) {
					that.flag = false
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})

				}

				if (this.editcarcode == '' || this.editcarcode == undefined) {
					that.flag = false
					uni.showToast({
						title: '车号不能为空',
						icon: 'none'
					})

				}
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/JIHXrTliklxDjii?carcode=' + this.editcarcode +
					// 	'&truckerno=' + this.editPhone,
					url: this.baseUrl + '/zlkj/wechat/xgcl',
					method: "post",
					data: {
						carcode: this.editcarcode,
						truckerno: this.editPhone
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						uni.showToast({
							title: '修改成功'
						})
						this.getList()
					}
				})
			},
			oncancelmodal() {
				this.showEditpop = false
				this.editPhone = ""
				this.editcarcode = ""
			},
			tapredo() {
				if (this.flag) return
				let checkList = []
				this.list.forEach((item) => {
					if (item.checked) {
						checkList.push(item.ID)
					}
				})

				if (checkList.length == 0 || this.list.length == 0) return uni.showToast({
					title: '请选择数据',
					icon: 'none'
				})

				this.flag = true
				uni.request({
					// url: 'https://api.zlkj-port.com/szgjapi/zlzg/U/KbjhHlc9nwiiS9m',
					url: this.baseUrl + '/zlkj/wechat/cxzpcl',
					data: {
						ID: checkList.toString(),
						truckname: this.truckname  
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "POST",
					success: (res) => {
						this.flag = false
						uni.showToast({
							title: '提交成功'
						})

						setTimeout(() => {
							this.getList()
						}, 1000)
					},
					fail() {
						this.flag = false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		padding: 6rpx !important;
	}

	.mainCon {
		.headForm {
			padding: 20rpx;
			position: fixed;
			width: 100%;
			top: 0;
			z-index: 10;
			background-color: #FFFFFF;

			.btnGroup {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 15rpx;
			}
		}
		.listCon {
		
			.listItem {
				margin-left: 10px;
				padding: 20rpx;
				border-bottom: 1px solid $u-border-color;
				display: flex;
				align-items: center;
				.infoCon {
					width: 90%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.container{
						flex-grow: 2;
						// flex: 2;
					}
					.checkBox {
					}
		
					.cellItem {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						.label {}
					}
		
					.edit {
						// margin-left: 80rpx;
						// color: #FF1F1C;
					}
		
					.labelTag {
						background-color: #E0EDFB;
						color: #4C86E7;
						line-height: 50rpx;
						border-radius: 25rpx;
						font-size: 26rpx;
						text-align: center;
						padding-right: 15rpx;
						padding-left: 15rpx;
					}
				}
			}
		}
		
		
	}

	
</style>
